<template>
    <div class="payAdd">
        <div class="payAddHead">
            <div class="payLeft"><button>新增计费项目</button></div>
            <div class="payRight"></div>
        </div>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm"
            style="margin-top: 20px;">
            <el-form-item label="计费项目名称" prop="payname">
                <el-input v-model="form.payname"></el-input>
            </el-form-item>
            <el-form-item label="项目优先级" prop="paylevel">
                <el-input v-model="form.paylevel" style="margin-right: 120px;"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
            <el-form-item label="项目用量/时长" prop="paynum">
                <el-input v-model="form.paynum"></el-input>
            </el-form-item>
            <el-form-item label="项目价格" prop="paymoney">
                <el-input v-model="form.paymoney" style="margin-right: 120px;"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
            <el-form-item label="通知状态" prop="paystatus">
                <el-select v-model="form.paystatus">
                    <el-option label="已通知" :value=1></el-option>
                    <el-option label="未通知" :value=2></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="计费目录" prop="c_id">
                <el-select v-model="form.c_id" style="margin-right: 120px;" placeholder="请选择状态">
                    <el-option label="电费目录" :value=7></el-option>
                    <el-option label="水费固定月目录" :value=8></el-option>
                    <el-option label="水费按量目录" :value=9></el-option>
                    <el-option label="天然气目录" :value=10></el-option>
                    <el-option label="物业费费目录" :value=11></el-option>
                    <el-option label="宽带费目录" :value=12></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-form>
            <el-form-item label="通知内容" prop="paycontent" label-width="200px">
                <tinymce-editor v-model="form.paycontent" :height="200"></tinymce-editor>
            </el-form-item>
        </el-form>
        <div class="payAddFooter">
            <el-button type="primary" size="middle" @click="handleBack">返回</el-button>
            <el-button type="primary" size="middle" @click="handleSave">保存</el-button>
            <el-button type="primary" size="middle" @click="handleSave">提交</el-button>
        </div>
    </div>
</template>
<script>
import TinymceEditor from '@/components/Editor/index.vue'
export default {
    components: {
        TinymceEditor
    },
    data() {
        return {
            form: {
                paystatus: 1,
                token: ''
            },
            rules: {
                payname: [
                    { required: true, message: '计费项目不能为空', trigger: 'blur' },
                ],
                paylevel: [
                    { required: true, message: '项目级别不能为空', trigger: 'blur' },
                ],
                paynum: [
                    { required: true, message: '项目用量/时长不能为空', trigger: 'blur' },
                ],
                paymoney: [
                    { required: true, message: '项目价格不能为空', trigger: 'blur' },
                ],
                paystatus: [
                    { required: true, message: '项目价格不能为空', trigger: 'blur' },
                ],
                c_id: [
                    { required: true, message: '项目价格不能为空', trigger: 'blur' },
                ],
            },
            editorInit: {
                language: 'zh_CN',
                height: '400px',
                convert_urls: false,
                plugins: [
                    'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
                ],
                toolbar: [
                    'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
                    'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
                ],
                images_upload_handler: function (blobInfo, success, failure) {
                    const formData = new FormData()
                    formData.append('file', blobInfo.blob())
                    createStorage(formData)
                        .then(res => {
                            success(res.data.data.url)
                        })
                        .catch(() => {
                            failure('上传失败，请重新上传')
                        })
                }
            }
        }
    },
    methods: {
        //添加数据
        AddCount() {
            this.$Axios({
                url: 'cost/addCostData',
                method: 'post',
                data: this.form,
                success: ((res) => {
                    console.log(res);
                    this.$router.go(-1)
                    this.$message.success('保存成功')
                })
            })
        },
        handleBack() {
            this.$router.go(-1)
        },
        handleSave() {
            if (this.form.payname == null && this.form.paylevel == null && this.form.paynum == null && this.form.paymoney == null) {
                this.$message.error('新增信息不能为空')
                return
            }
            this.$confirm('确认保存计费信息？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.form.token = sessionStorage.getItem('token')
                this.AddCount()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消保存'
                });
            });
        },
    }
}
</script>
<style lang="scss" scoped>
.payAdd {
    margin: 0.4% 0.2%;
    border: 1px solid #dcdfe6;

    .payAddHead {
        display: flex;

        .payLeft {
            button {
                width: 130px;
                border: 1px solid #dcdfe6;
                border-bottom: #fff;
                padding: 10px 20px;
                color: #409eff;
                background-color: #fff;

            }
        }

        .payRight {
            width: 100%;
            background-color: rgba(0, 0, 2, .03);
            border: 1px solid #dcdfe6;
            border-left: none;
        }
    }

    .el-form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        .el-input {
            width: 400px;
        }

        .el-select {
            width: 400px;
        }
    }

    .payAddFooter {
        width: 100px;
        position: absolute;
        right: 0;
        top: 300px;

        .el-button {
            padding: 10px 25px;
            margin: 10px 0;
        }
    }
}

::v-deep .el-form-item__content {
    display: flex;
}
</style>